<template>
	<view class="content">
		<u-collapse :item-style="itemStyle">
				<u-collapse-item  v-for="(item, index) in archivesList" :key="index">
					<view class="u-collapse-item-title" slot="title">
						<image style="width: 34rpx;display: inline-block;margin-right: 23rpx;" src="http://shoe-orange.laiwang.work/img/qa.png" mode="widthFix">
						</image>
						<view class="title-num">
							Q1
						</view>
						<view style="display: inline-block;">{{item.webapptitle}}</view>
					</view>
					<view class="collapse-item">
						<rich-text :nodes="item.webappcontent"></rich-text>
					</view>
				</u-collapse-item>
			</u-collapse>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemStyle:{
					'border-bottom':'1px solid #F1EFEF',
					'padding':'10rpx 30rpx',
					'margin-bottom':'16rpx',
				},
				archivesList:[
					{
						webapptitle:'标题',
						webappcontent:'      描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述'
					}
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less">
.content{
	margin: 10rpx 20rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	min-height: 100vh;
}
.u-collapse-item-title{
	display: flex;
	align-items: center;
	position: relative;
	.title-num{
		position: absolute;
		left: 6rpx;
		font-size: 16rpx;
		color: #FFFFFF;
	}
}
</style>
